/**
 * 火花分镜生成进度对话框
 * 显示AI生成分镜的进度
 */

import React from 'react'
import { Modal, Progress, Space, Typography } from 'antd'
import { GenerationProgress } from '../../../types/sparkStoryboard'

const { Text } = Typography

export interface GenerationProgressDialogProps {
  visible: boolean
  progress: GenerationProgress
  onCancel?: () => void
}

/**
 * 根据阶段获取状态颜色
 */
const getProgressStatus = (phase: GenerationProgress['phase']): 'active' | 'success' => {
  return phase === 'completing' ? 'success' : 'active'
}

/**
 * 根据阶段获取进度条颜色
 */
const getProgressColor = (phase: GenerationProgress['phase']): string => {
  switch (phase) {
    case 'analyzing':
      return '#1890ff' // 蓝色
    case 'generating':
      return '#52c41a' // 绿色
    case 'completing':
      return '#13c2c2' // 青色
    default:
      return '#1890ff'
  }
}

export const GenerationProgressDialog: React.FC<GenerationProgressDialogProps> = ({
  visible,
  progress,
  onCancel
}) => {
  return (
    <Modal
      title="正在生成分镜"
      open={visible}
      footer={null}
      closable={!!onCancel}
      onCancel={onCancel}
      maskClosable={false}
      width={500}
    >
      <Space direction="vertical" size="large" style={{ width: '100%' }}>
        {/* 进度条 */}
        <Progress
          percent={progress.percentage}
          status={getProgressStatus(progress.phase)}
          strokeColor={getProgressColor(progress.phase)}
          strokeWidth={12}
        />

        {/* 进度信息 */}
        <div style={{ textAlign: 'center' }}>
          <Text strong style={{ fontSize: 16 }}>
            {progress.message}
          </Text>
        </div>

        {/* 阶段说明 */}
        <div style={{ textAlign: 'center' }}>
          <Text type="secondary" style={{ fontSize: 14 }}>
            {getPhaseDescription(progress.phase)}
          </Text>
        </div>
      </Space>
    </Modal>
  )
}

/**
 * 获取阶段的详细描述
 */
function getPhaseDescription(phase: GenerationProgress['phase']): string {
  switch (phase) {
    case 'analyzing':
      return 'AI正在理解文章内容和结构...'
    case 'generating':
      return 'AI正在创作分镜场景，这可能需要一些时间...'
    case 'completing':
      return '正在保存生成的分镜数据...'
    default:
      return ''
  }
}
